<!-- 列表 -->
<template>
  <div class="wrap">
    <ToDoItem
      v-for="item in list"
      :key="item.id"
      :item="item"
      :removeItem="removeItem"
      @change-checked="onChangeChecked"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ToDoItem from './ToDoItem.vue'
import { Item } from '@/types/item'

export default defineComponent({
  name: 'ToDo',
  components: { ToDoItem },
  props: ['list', 'removeItem'],
  setup(props, { emit }) {
    function onChangeChecked(item: Item, bool: boolean) {
      emit('change-checked', item, bool)
    }
    return { onChangeChecked }
  }
})
</script>

<style scoped lang="scss">
.wrap {
  background-color: #fff3ee;
  border-radius: 12px;
  overflow: hidden;
}
</style>
